<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>自习室状态</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<table id="demo" lay-filter="test"></table>

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
    layui.use(['table','layer','jquery'], function () {
        var table = layui.table;
        var layer = layui.layer;
        let $ = layui.jquery;

        table.render({
            elem: '#demo',
            height: 'auto',
            url: '/studyRoom/getRoomList', //数据接口,
            page: true, //开启分页
            cols: [[ //表头
                {field: 'studyroomId', title: '自习室编号', width: "10%", sort: true},
                {field: 'studyroomType', title: '自习室类型', width: "10%"},
                {field: 'studyroomNumber', title: '自习室楼号', width: "10%", sort: true},
                {field: 'studyroomAmount', title: '自习室人数', width: "10%"},
                {field: 'studyroomNote', title: '备注', width: "12%"},
                {field: 'studyroomState', title: '使用状态', width: "10%",templet:function (data) {
                        if (data.studyroomState==='1'){
                            return '正常使用'
                        }else {
                            return '已暂停使用';
                        }
                    }},
                {title: '操作', width: '20%',toolbar: '#barDemo'},
            ]],
            response: {
                statusCode: 200 ,//规定成功的状态码，默认：0
            },
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            }
        });

        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'apply') { //申请
                layer.open({
                    type:2,
                    content:'/studyRoom/apply',
                    area: ['100%', '100%'],
                    success: function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        body.find("input[name='studyRooms.studyroomId']").val(data.studyroomId);
                        body.find("input[name='studyRooms.studyroomNumber']").val(data.studyroomNumber);
                    }
                })
            }else if (layEvent==='view'){
                // 查看
                let html = '<div class="layui-btn-container">'
                let students = data.students;
                debugger
                for (let i=0;i<students.length;i++){
                    html+='<button type="button" class="layui-btn">'+students[i].studentName+'</button> '
                }
                html+='</div>'
                layer.open({
                    type: 1,
                    content: html //这里content是一个普通的String
                });
            }
        })
    })
</script>
<script type="text/html" id="barDemo">
    <c:if test="${sessionScope.student_user!=null}">
        <a class="layui-btn layui-btn-xs" lay-event="apply">申请</a>
    </c:if>
    <c:if test="${sessionScope.admin_user!=null}">
        <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
    </c:if>
</script>
</body>
</html>